<template>
  <div>
    <div>
      <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
               active-text-color="#ffd04b" :default-active="rootActiveRouter" router>
        <el-menu-item index="1">媒体宝系统</el-menu-item>
        <el-menu-item index="Task" :route="{name:'ActivityList'}">任务宝</el-menu-item>
        <el-menu-item index="Msg" :route="{name:'Push'}">消息宝</el-menu-item>
        <el-menu-item index="Auth" :route="{name:'Auth'}">授权</el-menu-item>
        <el-submenu index="5" style="float: right">
          <template slot="title">{{ username }}</template>
          <el-menu-item index="5-1">个人中心</el-menu-item>
          <el-menu-item index="5-2">注销</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Layout',
  data() {
    return {
      rootActiveRouter: '',
    }
  },
  components: {},
  mounted() {
    this.rootActiveRouter = this.$route.matched[1].name;
  },
  computed: {
    username() {
      return this.$store.state.username
    }
  }
}
</script>
